<?php require_once(dirname(__FILE__) . '/../../include/config.inc.php');
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title><?php echo $cfg_webname?> 数据统计</title>
    <link rel="stylesheet" href="css/style.css?v=20210105"/>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=IYNBZ-YNYWG-IE6QE-IQPNJ-J3HKV-BVBTX"></script>
</head>
<script>
    $(document).ready(function () {
        var whei = $(window).width()
        $("html").css({fontSize: whei / 20})
        $(window).resize(function () {
            var whei = $(window).width()
            $("html").css({fontSize: whei / 20})
        });
    });

</script>
<body>
<div class="canvas" style="opacity: .2">
    <iframe frameborder="0" src="js/index.html" style="width: 100%; height: 100%"></iframe>
</div>
<div class="head">
    <h1><?php echo $cfg_webname;?> 可视化视图</h1>
    <div class="weather"><span id=localtime></span></div>
</div>

<div id="content">
    <ul class="clearfix">
        <li>
            <div class="boxall" style="height: 1.8rem;">
                <div class="current-num">
                    <div>系统工单数量</div>
                    <p> {{ datas.count.all }}</p>
                </div>
                <div class="boxfoot"></div>
            </div>

            <div class="boxall" style="height: 3.3rem">
                <div class="alltitle"><img src="images/icon01.png" width="28"/> 报修设备类型</div>
                <div class="online_con" id="container2">
                </div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 4.2rem;">
                <div class="alltitle"><img src="images/star.png"/> 本月服务之星</div>
                <div class="industry_con" id="guzhang">
                    <table class="panel-table" bordercolor="#0d48e0" border="1">
                        <tbody>
                        <tr class="aaa" align="center">
                            <td style="color: #00fcff; font-size: 18px; padding: 5px 0;">工程师</td>
                            <td style="color: #00fcff; font-size: 18px; padding: 5px 0;">结单数量</td>
                            <td style="color: #00fcff; font-size: 18px; padding: 5px 0;">积分</td>
                        </tr>
                        <tr v-for="y in datas.managelist" class="aaa" style="font-size: 16px;" align="center">
                            <td>{{ y.truename }}</td>
                            <td>{{ y.cishu }}</td>
                            <td>{{ y.fee }}</td>
                        </tr>
                        </tbody>
                    </table>


                </div>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li>
            <div class="boxall" style="height: 6.5rem">
                <div class="center_top_con" style="margin-top:15px" id="distribution_map">
                    <div id="dongtai" class="dongtai">
                        <div class="tit">人员动态</div>
                        <div class="dongtai_box" id="dongtai_box">

                        </div>
                    </div>
                </div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height:2.95rem;">
                <table class="panel-table" bordercolor="#0d48e0" border="1">
                    <thead bgcolor="#0e4ae0" align="center">
                    <tr height="40">
                        <th class="alltitle2" colspan="6"><img src="images/icon04.png"/> 报修列表</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="aaa" align="center">
                        <td style=" width:2rem;color: #00fcff; font-size: 0.2rem; padding: 0.05rem 0;">客户</td>
                        <td style="width:1.5rem;color: #00fcff; font-size: 18px; padding: 5px 0; ">任务类型</td>
                        <td style="width:2.2rem;color: #00fcff; font-size: 18px; padding: 5px 0;">工程师</td>
                        <td style="color: #00fcff; font-size: 18px; padding: 5px 0;">故障</td>
                        <td style=" width:1.1rem;color: #00fcff; font-size: 18px; padding: 5px 0;">进度</td>

                    </tr>
                    <tr v-for="y in datas.order" class="aaa" style="font-size: 16px;" align="center">
                        <td>{{ y.school }}</td>
                        <td>{{ y.renwu }}</td>
                        <td>{{ y.truename }}</td>
                        <td>{{ y.content }}</td>
                        <td>{{ y.jindu }}</td>

                    </tr>
                    </tbody>
                </table>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li>
            <div class="boxall" style="height: 1.8rem;">

                <div class="yibiao">
                    <div class="circleChart" id="0"></div>
                    <h3>等待受理</h3>
                </div>
                <div class="yibiao">
                    <div class="circleChart" id="1"></div>
                    <h3>进行中</h3>
                </div>

                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.3rem;">
                <div class="alltitle"><img src="images/icon05.png"/> 报修完成率</div>
                <div class="news_list" id="wanchenglv">

                </div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 4.2rem;">
                <div class="alltitle"><img src="images/icon06.png"/>每月报修次数</div>
                <div class="data_con" id="jilu">
                </div>
                <div class="boxfoot"></div>
            </div>
        </li>
    </ul>
</div>
<!--遮罩层-->


<!-- Morris Charts CSS -->
<link href="../ui/css/plugins/morris.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript" src="js/circleChart.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="js/times.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!-- Morris Charts JavaScript -->
<script type="text/javascript" src="../layer/layer.js"></script>

<script type="text/javascript">

    $(function () {
        //初始化地图
        center = new qq.maps.LatLng(32.976950, 114.037510);
        map = new qq.maps.Map(document.getElementById("distribution_map"), {
            center: center,
            zoom: 13,
        });
        markersArray = []
        labelsArray = []
    });

    // 等待受理
    $(".circleChart#0").circleChart({
        size: 100,
        value: 50,
        text: 0,
        startAngle: 90,
        color:'red',
        widthRatio: 0.2, // 进度条宽度
        onDraw: function(el, circle) {
            circle.text(Math.round(circle.value) + "个");
        }
    });
    // 进行中
    $(".circleChart#1").circleChart({
        size: 100,
        value: 50,
        text: 0,
        startAngle: 90,
        color:'green',
        widthRatio: 0.2, // 进度条宽度
        onDraw: function(el, circle) {
            circle.text(Math.round(circle.value) + "个");
        }
    });


    var vm = new Vue({
        el: '#content',
        data: {
            datas: {
                count: {all: 0, doing: 5, waiting: 0, working: 99},
                order: []
            },
            timer: null
        },
        methods: {
            setTimer: function () {
                console.log('开始定时...111')
                if (this.timer == null) {
                    this.timer = setInterval(() => {
                        console.log('开始定时...每过3秒执行一次')

                        $.ajax({
                            type: 'POST',
                            url: "data.php",
                            data: {time: Date.parse(new Date())},
                            dataType: 'JSON',
                            success: function (result) {
                                console.log(result);
                                if (result.errno == 0) {
                                    vm.datas = result.data;
                                    console.log(vm.datas);
                                    vm.$forceUpdate();
                                    $("#dongtai_box").html(result.data.dongtai);
                                    getData();
                                }
                            }
                        })
                    }, 3000)
                }
            }
        },
        created: function () {
            console.log('开始定时...000')
            //this.getFamilyBase_info()
            // 每次进入界面时，先清除之前的所有定时器，然后启动新的定时器
            clearInterval(this.timer)
            this.timer = null
            this.setTimer()
        },
        destroyed: function () {
            // 每次离开当前界面时，清除定时器
            clearInterval(this.timer)
            this.timer = null
        }

    })


    //工单查看
    function showgongdan(id) {
        //iframe窗
        layer.open({
            skin: 'layui-layer-molv', //样式类名
            type: 2,
            title: '工单详情',
            shadeClose: true,
            shade: false,
            //maxmin: true, //开启最大化最小化按钮
            area: ['893px', '600px'],
            content: ['../ordershow2.php?id=' + id], //iframe的url，no代表不显示滚动条

        });
    }

    //加载数据
    function getData() {
        var cssC = {
            color: "#fff",
            fontSize: "14px",
            fontWeight: "bold",
            border:"none",
            background: "rgba(25, 25, 25, 0.7)",
            padding:"5px"

        };

        /*map*/
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);
            }
        }
        if (labelsArray) {
            for (i in labelsArray) {
                labelsArray[i].setMap(null);
            }
        }
        var anchor = new qq.maps.Point(6, 6),
            size = new qq.maps.Size(32, 32),
            origin = new qq.maps.Point(0, 0);
        var map_data = vm.datas.map;

        for (var i = 0; i < map_data.length; i++) {
            var data_pos = map_data[i].latlngs;
            var latLng = eval(new qq.maps.LatLng(map_data[i].lat, map_data[i].lng));
            //var latLng = new LatLng(33.006170,114.015880);
            var marker = new qq.maps.Marker({
                position: latLng,
                map: map,
                icon: new qq.maps.MarkerImage('img/' + map_data[i].jindu + '.gif', size, origin, anchor)
            });
            markersArray.push(marker);


            var label = new qq.maps.Label({
                position:  latLng,
                map: map,
                content: map_data[i].manageids,
                offset: new qq.maps.Size(-25, 20),
                style: cssC
            });
            labelsArray.push(label);

        }
        /*map*/

        if (vm.datas.count.waiting > 8) {
            $("#0").circleChart({
                size: 100,
                value: vm.datas.count.waiting*2,
                color: 'red',
                startAngle: 90,
                widthRatio: 0.2, // 进度条宽度
                onDraw: function (el, circle) {
                    circle.text(Math.round(vm.datas.count.waiting) + "个");
                }
            });
        } else {
            if(vm.datas.count.waiting==0){
                $("#0").circleChart({
                    size: 100,
                    value: 1,
                    color: 'green',
                    startAngle: 90,
                    widthRatio: 0.2, // 进度条宽度
                    onDraw: function (el, circle) {
                        circle.text(Math.round(vm.datas.count.waiting) + "个");
                    }
                });
            }else{
                $("#0").circleChart({
                    size: 100,
                    value: vm.datas.count.waiting*2,
                    color: 'green',
                    widthRatio: 0.2, // 进度条宽度
                    onDraw: function (el, circle) {
                        circle.text(Math.round(vm.datas.count.waiting) + "个");
                    }
                });
            }

        }

        if (vm.datas.count.doing>20) {
            $("#1").circleChart({
                size: 100,
                value: vm.datas.count.doing*2,
                color: 'red',
                widthRatio: 0.2, // 进度条宽度
                onDraw: function (el, circle) {
                    circle.text(Math.round(vm.datas.count.doing) + "个");
                }
            });
        } else {
            if(vm.datas.count.doing==0){
                $("#1").circleChart({
                    size: 100,
                    value: 1,
                    color: 'green',
                    widthRatio: 0.2, // 进度条宽度
                    onDraw: function (el, circle) {
                        circle.text(Math.round(vm.datas.count.doing) + "个");
                    }
                });
            }else{
                $("#1").circleChart({
                    size: 100,
                    value: vm.datas.count.doing*2,
                    color: 'green',
                    widthRatio: 0.2, // 进度条宽度
                    onDraw: function (el, circle) {
                        circle.text(Math.round(vm.datas.count.doing) + "个");
                    }
                });
            }

        }


        /* type */
        var dom = document.getElementById("container2");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {

            calculable: true,
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '75%',
                    center: ['50%', '50%'],
                    data: function () {
                        var serie = [];
                        for (var i = 0; i < vm.datas.order_type.length; i++) {
                            var item = {
                                name: vm.datas.order_type[i].typename,
                                value: vm.datas.order_type[i].cnt
                            };
                            serie.push(item);
                        }
                        return serie;
                    }()
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }



        /*完成率*/
        var wanchenglv = document.getElementById('wanchenglv');
        var myChart = echarts.init(wanchenglv);

        option = {
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [
                {
                    name: '完成率',
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    center: ['50%', '80%'],    // 默认全局居中
                    radius: 175,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 30
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        splitNumber: 10,   // 每份split细分多少段
                        length: 12,        // 属性length控制线长
                    },
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, 'green']]
                        }
                    },
                    pointer: {
                        width: 10,
                        length: '90%',
                        color: 'rgba(255, 255, 255, 0.8)'
                    },
                    title: {
                        show: true,
                        offsetCenter: [0, '-50%'],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            color: '#fff',
                            fontSize: 28
                        }
                    },
                    detail: {
                        show: true,
                        backgroundColor: 'rgba(0,0,0,0)',
                        borderWidth: 0,
                        borderColor: '#ccc',
                        width: 90,
                        height: 40,
                        offsetCenter: [0, -40],       // x, y，单位px
                        formatter: '{value}%',
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontSize: 40
                        }
                    },
                    data: [{value: vm.datas.count.working, name: '完成率'}]
                }
            ]
        };

        myChart.setOption(option, true);



        //每月报修柱状图
        var dom = document.getElementById("jilu");
        var myChart = echarts.init(dom);
        option = null;
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: '#00f6ff',
                fontSize: 30
            },
            xAxis: [
                {
                    type: 'category',
                    data: function () {
                        var serie = [];
                        for (var i = 0; i < vm.datas.year_data.length; i++) {
                            var item = vm.datas.year_data[i].month;
                            serie.push(item);
                        }
                        return serie;
                    }(),
                    axisTick: {
                        alignWithLabel: true
                    },
                    nameLocation: 'end',//坐标轴名称显示位置。
                    axisLabel: {//坐标轴刻度标签的相关设置。
                        interval: 0,
                        rotate: "45"
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    type: 'bar',
                    data: function () {
                        var serie = [];
                        for (var i = 0; i < vm.datas.year_data.length; i++) {
                            var item = vm.datas.year_data[i].num;
                            serie.push(item);
                        }
                        return serie;
                    }(),
                    //配置样式
                    itemStyle: {
                        //通常情况下：
                        normal: {
                            //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params) {
                                var colorList = colorList = [
                                    '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                ];
                                return colorList[params.dataIndex];
                            },
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'white',
                                    fontSize: 12
                                }
                            }
                        },
                        //鼠标悬停时：
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                }

            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }

    }


</script>

</body>
</html>
